import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { SubjectForm, SubjectSummaries } from '../../component';
import { Table, Tag, Tabs, Spin, Button, message, Row, Col } from 'antd';
import common from '../../common';
const { TabPane } = Tabs;

const SubjectEvent = {
  getAll: 'subject-getall',
  insert: 'subject-insert',
  updateStatus: 'subject-update-status',
};

export default () => {
  const [subjectList, setSubjectList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [formVisible, setFormVisible] = useState(false);
  const [formLoading, setFormLoading] = useState(false);
  const [sumVisiable, setSumVisiable] = useState(false);
  const [sumHoverDetail, setSumHoverDetail] = useState({
    subjectSummaries: [],
  });
  const changeStatus = (item, value) => {
    common.commonEvent(
      SubjectEvent.updateStatus,
      res => {
        if (res.success) {
          setFormVisible(false);
          common.commonEvent(SubjectEvent.getAll, setSubjectList, tabsKey);
          message.success(res.message);
        } else {
          message.error(res.message);
        }
        setFormLoading(false);
      },
      {
        id: value,
        status: item.status == 1 ? 0 : 1,
      },
    );
  };
  const columns = [
    {
      title: '科目名称',
      dataIndex: 'subjectName',
      key: 'subjectName',
    },
    {
      title: '科目CODE',
      dataIndex: 'subjectCode',
      key: 'subjectCode',
    },
    {
      title: '帮记码',
      dataIndex: 'subjectHelpCode',
      key: 'subjectHelpCode',
    },
    {
      title: '借贷属性',
      dataIndex: 'subjectDirection',
      key: 'subjectDirection',
      render: (value, item) => {
        if (value == 1) {
          return <Tag color="cyan">贷</Tag>;
        } else {
          return <Tag color="blue">借</Tag>;
        }
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (value, item) => {
        if (value == 1) {
          return <Tag color="green">有效</Tag>;
        } else {
          return <Tag color="red">无效</Tag>;
        }
      },
    },
    {
      title: '期初余额',
      dataIndex: 'k1',
      key: 'k1',
      render: (value, item) => {
        if (item.subjectSummaries.length === 0) {
          return 0;
        } else {
          const subjectSummaries = item.subjectSummaries.filter(
            (value, index) => {
              return value.summaryData === '';
            },
          );
          console.log(subjectSummaries && subjectSummaries.length > 0);
          if (subjectSummaries && subjectSummaries.length > 0) {
            return subjectSummaries[0].earlyStage;
          } else {
            return 0;
          }
        }
      },
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (value, item) => {
        return (
          <Row gutter={16}>
            <Col>
              <a
                onClick={() => {
                  changeStatus(item, value);
                }}
              >
                {item.status == 1 ? '失效' : '有效'}
              </a>
            </Col>
            <Col>
              <a
                onClick={() => {
                  setSumVisiable(true);
                  setSumHoverDetail(item);
                }}
              >
                查看账期
              </a>
            </Col>
          </Row>
        );
      },
    },
  ];
  useEffect(() => {
    common.commonEvent(SubjectEvent.getAll, setSubjectList, '1');
  }, []);
  const [tabsKey, setTabsKey] = useState('1');
  useEffect(() => {
    return function closeLoading() {
      setLoading(false);
    };
  }, [subjectList]);

  let treedata = subjectList.map(item => {
    return {
      value: item.subjectCode,
      label: item.subjectName + '(' + item.subjectCode + ')',
      children: item.children.map(cy => {
        return {
          value: cy.subjectCode,
          label: cy.subjectName + '(' + cy.subjectCode + ')',
        };
      }),
    };
  });
  const renderTable = () => {
    if (subjectList.length == 0) {
      return null;
    } else {
      return (
        <Table
          rowKey={'id'}
          defaultExpandAllRows={true}
          columns={columns}
          dataSource={subjectList}
        />
      );
    }
  };
  return (
    <Spin spinning={loading}>
      <div className={styles.subjectmain}>
        <div className={styles.subjecthandler}>
          <Button
            onClick={() => {
              setFormVisible(true);
            }}
            type="primary"
          >
            新增科目
          </Button>
        </div>
        <Tabs
          defaultActiveKey={tabsKey}
          onChange={key => {
            setTabsKey(key);
            setLoading(true);
            common.commonEvent(SubjectEvent.getAll, setSubjectList, key);
          }}
          className={styles.subjecttabs}
        >
          <TabPane tab="资产" key="1"></TabPane>
          <TabPane tab="负债" key="2"></TabPane>
          <TabPane tab="权益" key="3"></TabPane>
          <TabPane tab="成本" key="4"></TabPane>
          <TabPane tab="损益" key="5"></TabPane>
        </Tabs>
        {renderTable()}
        {formVisible ? (
          <SubjectForm
            visible={formVisible}
            parentTree={treedata}
            loading={formLoading}
            onCancel={() => {
              setFormVisible(false);
            }}
            onFinish={value => {
              setFormLoading(true);
              common.commonEvent(
                SubjectEvent.insert,
                res => {
                  if (res.success) {
                    setFormVisible(false);
                    common.commonEvent(
                      SubjectEvent.getAll,
                      setSubjectList,
                      tabsKey,
                    );
                    message.success(res.message);
                  } else {
                    message.error(res.message);
                  }
                  setFormLoading(false);
                },
                { ...value, type: tabsKey },
              );
            }}
          ></SubjectForm>
        ) : null}
        {sumVisiable ? (
          <SubjectSummaries
            visible={sumVisiable}
            hoverData={sumHoverDetail}
            onCancel={() => {
              setSumVisiable(false);
              common.commonEvent(SubjectEvent.getAll, setSubjectList, tabsKey);
            }}
          />
        ) : null}
      </div>
    </Spin>
  );
};
